<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>ByteCollege云课</title>
	<link rel="stylesheet" th:href="@{font/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{css/wangEditor.css}"/>
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<script th:src="@{js/jquery-3.3.1.min.js}"></script>
	<script th:src="@{js/jquery.validate.js}"></script>
	<script th:src="@{js/bootstrap.js}"></script>
	<script th:src="@{js/wangEditor.js}"></script>
	<style>

		.item-header {
		    margin-bottom: 5px;
		}
		.line {
		    width: 20%;
		    display: inline-block;
		    border-top: 1px solid #777;
		    margin-bottom: 10px;
		}
		.item-title {
		    width: 100px;
		    display: inline-block;
		    color: #777;
		    font-size: 21px;
		}
		#publish label.error
		{
		    color:Red;
		    font-size:13px;
		    margin-left:5px;
		    padding-left:16px;
		}
		.side-btn {
		    width: 100%;
		    margin-bottom: 10px;
		    padding: 14px 0;
		    color: #fff;
		    background: #0c9;
		    font-size: 20px;
		    border-radius: 0;
		    border: none;
		}
		.layout {
			min-height: 80%;
			margin-top: 70px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div th:include="index::head-nav"></div>
	<div class="container layout layout-margin-top">
		<div class="row">
	            <div class="col-12 col-md-12">
					<div class="panel panel-default">
						<div class="panel-body form-horizontal">
							<div class="clearfix text-center item-header">
							    <span class="line"></span>
							    <span class="text-center item-title">发表文章</span>
							    <span class="line"></span>
							</div>
						</div>
						<div class="panel-body form-horizontal">
							<div th:switch="${message}">
								<div th:case="'Success'" class="alert alert-success">
									<strong>发表成功!</strong> 请耐心等待管理员审核
								</div>
								<div th:case="'Failed'" class="alert alert-danger">
									<strong>发表失败!</strong> 请稍后再试
								</div>
								<div th:case="'IsNull'" class="alert alert-danger">
									<strong>发表失败!</strong> 请填写标题和内容
								</div>
							</div>
							<form class="form-horizontal" id="publish" th:action="@{addArticle}" method="post">
							    <div class="panel-body form-horizontal">
									<div class="form-group">
									    <input class="form-control" name="articleTitle" id="title" type="text" value="" placeholder="请输入文章标题">
									    <div class="help-block text-left"></div>
									</div>
							        <div class="form-group">
							            <select name="atypeId" class="form-control col-sm-3">
											<option th:each="atype:${atypeList}"
													th:value="${atype.atypeId}"
													th:text="${atype.atypeName}"></option>
							            </select>
							        </div>
							        <!-- 富文本编辑器 -->
							        <div class="form-group">
							            <div class="col-12">
							                <div id="editor"></div>
							                <textarea id="container" name="articleContent" style="display:none;height: 100%;width: 100%"></textarea>
							            </div>
							        </div>
							        <input type="submit" class="side-btn"  Text="发布"/>
							    </div>
							</form>
						</div>
					</div>
	            </div>
	        </div>
	    </div>
	</div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        $("#publish").validate({
            rules: {
				articleTitle:{
                    required: true,
                    minlength: 5,
                    maxlength:50,
                },
            },
            messages:{
				articleTitle:{
                    required: "标题不能为空",
                    minlength: "标题长度不能少于5个字符",
                    maxlength: "用户名长度不能超过20个字符",
                },
            }
        });
    });
</script>
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#editor');
    const $text = $('#container');
    editor.config.menus=[
        'code', // 插入代码
        'head', // 标题
        'bold', // 粗体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'image', // 插入图片
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'table', // 表格
        //			'video', // 插入视频
        'undo', // 撤销
        'redo' // 重复
    ];
    editor.config.showLinkImg = false
    editor.config.uploadImgServer = "editorUpload";
    editor.config.uploadFileName = "fileName";
	editor.config.height = 600;
    editor.config.uploadImgHooks = {
        before: function (xhr, editor, files) {
        },
        fail: function (xhr, editor, result) {
            console.log("上传失败,原因是" + result);
        },
        customInsert: function (insertImg, result, editor) {
            let url = result.url;
            insertImg(url)
        }
    };
    editor.config.uploadImgMaxLength = 1
    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text.val(html)
    }
    editor.create()
    // 第一步，初始化 textarea 的值
    $text.val(editor.txt.html())
</script>

